<template>
  <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible"
    @close="clearDataList()" width="90vw" top="5vh">
    <el-container>
      <el-main style="height:70vh;overflow-x: hidden;">
        <!--        <div class="filter-container">-->
        <!--        <el-button-group>-->
        <!--          <el-button-->
        <!--            type="primary"-->
        <!--            icon="plus"-->
        <!--            @click="handlerAdd">添加-->
        <!--          </el-button>-->
        <!--        </el-button-group>-->
        <!--      </div>-->
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="5">
            <div class="boxsty">
              <el-tree :data="treeData" :props="defaultProps" :filter-node-method="filterNode" class="filter-tree"
                node-key="id" highlight-current :default-expanded-keys="[1]" accordion @node-click="getNodeData" />
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="19">
            <div class="boxsty">
              <div class="tabletext titbottom">已选择部门</div>
              <el-table :data="tableDataDept" stripe>
                <!--              <el-table-column-->
                <!--                 fixed-->
                <!--                 prop="deptId"-->
                <!--                 label="部门id"-->
                <!--                 width="80"-->
                <!--                 v-if="true">-->
                <!--               </el-table-column>-->
                <el-table-column prop="deptName" label="部门名称" min-width="350">
                </el-table-column>
                <!-- <el-table-column prop="deptExplain" label="上级部门" min-width="350">
                </el-table-column> -->

                <el-table-column  label="操作" width="100">
                  <template slot-scope="scope">
                    <el-button @click="handleClick(scope.$index)" type="danger" plain>删除</el-button>

                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
    <span slot="footer" class="dialog-footer">
      
      <el-button type="primary" v-if="canSubmit" @click="btnSave">确定</el-button>
      <el-button type="primary" plain @click="btnCancel">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import {
    addListObj,
    getBcpmxb,
    deletegz
  } from '@/api/ceping/cepingcpgzbcpmxb'
  import {
    fetchTree,
    getObj
  } from '@/api/admin/dept'

  export default {
    data() {
      return {
        qjGzId: "",
        visible: false,
        canSubmit: false,
        tableDataDept: [],
        dataForm: {

        },
        listQuery: {
          name: undefined
        },
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },

      }
    },
    created() {
      this.getList();
    },
    methods: {
      init(id) {
        this.dataForm.id = id || 0;
        this.qjGzId = id;
        this.visible = true;
        this.canSubmit = true;
        this.loadTableDataUser(id);
      },
      loadTableDataUser(id) {
        getBcpmxb(id).then(data => {
          var obj = data.data.data;
          if (obj) {
            for (var i = 0; i < obj.length; i++) {
              this.tableDataDept.push({
                id: obj[i].id,
                gzId: obj[i].gzId,
                deptName: obj[i].deptName,
                deptId: obj[i].deptId,
                bcpPx: obj[i].bcpPx,
              });
            }
          }
        }).catch(() => {
          this.$notify.error('数据错误')
        });
      },
      getList() {
        fetchTree(this.listQuery).then(response => {
          ////console.log(response.data);
          this.treeData = response.data.data
        })
      },
      filterNode(value, data) {
        if (!value) return true
        return data.label.indexOf(value) !== -1
      },
      getNodeData(data) {
        ////console.log(data);
        getObj(data.id)
          .then(res => {
            const deptDetail = res.data.data;
            let bFind = false;
            this.tableDataDept.find(value => {
              if (data.id === value.deptId) {
                bFind = true;
              }
            })
            if (bFind) {
              return;
            }
            this.tableDataDept.push({
              gzId: this.qjGzId,
              deptId: data.id,
              deptName: data.name,
              deptExplain: deptDetail.deptName
            })
          })
          .catch(err => {
           //console.log(err);
          })



      },
      handlerAdd() {

      },
      handleClick(index) {
        ////console.log(index);
        this.tableDataDept.splice(index, 1);
      },
      //清空记录
      clearDataList() {
        this.tableDataDept = [];
        this.qjGzId = '';
      },
      //保存部门
      btnSave() {
        this.canSubmit=false;
        if(this.tableDataDept.length==0){
          deletegz(this.qjGzId).then(res=>{
            this.$notify.success('清除成功')
            this.visible = false
            this.$emit('showRemarkList')
          })
        }else {
          ////console.log(this.tableDataDept);
          addListObj(this.tableDataDept).then(data => {
            this.$notify.success('添加成功')
            this.visible = false
            this.$emit('showRemarkList')
          }).catch(() => {
            this.canSubmit = true;
          });
        }
      },
      //取消按钮
      btnCancel() {
        this.visible = false;
        this.clearDataList();
      }
    }
  }

</script>

<style scoped>
</style>
